<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tips {
            line-height: 45px;
            font-size: 20px;
            text-indent: 10px;
        }
    </style>
</head>

<body>
    <div class="tips">
        距离十一放假还有xx天xx小时xx分xx秒
    </div>
</body>
<script>
    var tips = document.getElementsByClassName("tips")[0];
    var timer = null;

    console.log(tips);


    // 距离十一放假还有多少天?
    // 当前时间  距离  十一假期 的差值;

    // 页面加载时执行一次
    countDown();
    timer = setInterval(countDown, 1000); // 每间隔1s在执行一次

    // timer = setInterval(countDown(), 1000); // 1. 点调用countdown 2. 再将函数的返回值作为参数传入的计时器

    function countDown() {
        // 页面加载时立即执行
        var now = new Date();
        // var future = new Date("2023-9-29");
        var future = new Date("2023-9-20 15:00:00");
        // console.log(future);

        var ms = future - now;
        var time = Math.floor(ms / 1000);


        if (time > 0) {
            var day = Math.floor(time / (24 * 60 * 60));
            var hour = Math.floor(time / (60 * 60)) % 24;  // 不满一天的小时数
            hour = hour < 10 ? "0" + hour : hour;  // 补 0
            var min = Math.floor(time / 60) % 60; //  不满一小时的分钟
            min = min < 10 ? "0" + min : min;
            var sec = time % 60;  //  不满一分钟的秒数
            sec = sec < 10 ? "0" + sec : sec;

            // console.log(day,hour,min,sec);

            // 距离十一放假还有xx天xx小时xx分xx秒

            // var str = "距离十一放假还有" + day + "天" + hour + "小时" +min+"分" + sec + "秒";
            var str = `距离十一放假还有${day}天${hour}小时${min}分${sec}秒`;
            console.log(str);
            tips.innerText = str;
        }else{ // time <= 0
            tips.innerText = `倒计时结束,放假了`;
            clearInterval(timer);
        }
    }



</script>

</html>